<template>
  <div>
    <!-- 头部导航  -->
    <van-nav-bar
      title="地址"
      left-text="返回"
      left-arrow
      @click-left="$router.go(-1)"
    />
    <van-address-list
      v-model="chosenAddressId"
      :list="list"
      :disabled-list="disabledList"
      disabled-text="以下地址超出配送范围"
      default-tag-text="默认"
      @add="onAdd"
      @edit="onEdit"
    />
    <van-popup
      teleport="#app"
      v-model:show="show"
      position="bottom"
      :style="{ height: '70%' }"
    >
      <van-address-edit
        v-if="type === 1"
        :area-list="areaList"
        show-set-default
        show-search-result
        :search-result="searchResult"
        :area-columns-placeholder="['请选择', '请选择', '请选择']"
        @save="onSave"
      />
      <van-address-edit
        v-else
        :area-list="areaList"
        show-delete
        show-set-default
        show-search-result
        :address-info="address_info"
        :search-result="searchResult"
        :area-columns-placeholder="['请选择', '请选择', '请选择']"
        @save="amend"
        @delete="onDelete"
      />
    </van-popup>
  </div>
</template>

<script setup lang="ts">
import { areaList } from "@vant/area-data";
import { ref, onMounted } from "vue";
import {
  getAddress,
  addAddress,
  updateAddress,
  deleteAddr,
} from "../server/user";
let chosenAddressId = ref(1);
let list = ref([]);
let type = ref(1);
let show = ref(false);
let addressid = ref("");
let searchResult = ref([]);
let address_info = ref({});
let disabledList = ref([
  {
    id: "3",
    name: "王五",
    tel: "1320000000",
    address: "浙江省杭州市滨江区江南大道 15 号",
  },
]);
// 获取用户地址
onMounted(() => {
  getaddressList(0);
});
function getaddressList(id: any) {
  getAddress({ userid: localStorage.getItem("userid") }).then((res: any) => {
    if (res.data.length) {
      list.value = res.data;
      list.value.forEach((item: any, index: any) => {
        item.address =
          item.province + item.city + item.county + item.addressDetail;
        item.id = index + 1;
        if (item.isDefault === true) chosenAddressId.value = item.id;
        if (id) item.isDefault = false;
      });
      if (id) {
        list.value[id - 1].isDefault = true;
      }
    }
  });
}
// 添加地址
function onAdd() {
  type.value = 1;
  address_info.value = {};
  show.value = true;
}
// 确认添加
function onSave(info: any) {
  addAddress({
    userid: localStorage.getItem("userid"),
    name: info.name,
    tel: info.tel,
    province: info.province,
    city: info.city,
    county: info.county,
    addressDetail: info.addressDetail,
    isDefault: info.isDefault,
  }).then((res: any) => {
    getaddressList(0);
    show.value = false;
    address_info.value = {};
    console.log(res);
  });
}
// 编辑地址
function onEdit(item: any) {
  address_info.value = item;
  show.value = true;
  type.value = 2;
  addressid.value = item.addAddress;
}

// 确认修改地址
function amend(item: any) {
  item.userid = localStorage.getItem("userid");
  updateAddress(item).then((res) => {
    console.log(res);

    getaddressList(item.id);
    show.value = false;
  });
}
// 删除地址
function onDelete(item: any) {
  deleteAddr({ addressid: item.addressid }).then((res) => {
    getaddressList(0);
    show.value = false;
    address_info.value = {};
  });
}
</script>

<style scoped></style>
